<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dv {
            width: 300px;
            height: 600px;
            margin: 20px auto;
            position: relative;
        }

        .box {
            width: 300px;
            height: 500px;
            /* margin: 20px auto; */
            border: 2px solid #666;
            position: relative;
            overflow: hidden;
        }

        .me {
            width: 49px;
            height: 61px;
            background: url("../images/me.png");
            background-size: 49px 61px;
            border: 1px solid green;
            box-sizing: border-box;
            position: absolute;
            left: 125px;
            top: 439px;
        }

        .zd {
            width: 7px;
            height: 18px;
            background: url("../images/bullet.png");
            background-size: 7px 18px;
            position: absolute;
        }

        .plane {
            width: 30px;
            height: 18px;
            background: url("../images/plane1.png");
            background-size: 30px 18px;
            border: 1px solid red;
            box-sizing: border-box;
            position: absolute;
        }

        p {
            width: 300px;
            height: 50px;
            background-color: aqua;
            position: absolute;
            border: 2px solid #666;
            top: 500px;
            left: 0;
        }

        p span {
            color: red;
            font-size: 30px;
        }

        .over {
            width: 300px;
            height: 500px;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .over span {
            width: 214px;
            height: 52px;
            position: absolute;
            background-image: url("../images/logo.png");
            background-size: 214px 52px;
            left: 42px;
            top: 250px;
        }
    </style>
</head>

<body>
<div class="dv">
    <div class="box">
        <div class="over"><span></span></div>

        <div class="me"></div>
        <!-- <div class="zd"></div> -->
        <!-- <div class="plane"></div> -->
    </div>
    <p>你已击落敌机&nbsp;<span>0</span>&nbsp;架</p>
</div>
</body>
<script src="../js/daotin.js"></script>
<script>
    var box = document.querySelector(".box");
    // console.log(box);

    var me = document.querySelector(".me");
    var span = document.querySelector("p span");
    var over = document.querySelector(".over");

    var step = 5; // me 移动速度
    var bulletSpeed = 20; // 子弹移动速度
    var planeSpeed = 1;
    var bulletCreatTimer = 0;
    var planeCreatTimer = 0;

    var boxWidth = getStyle(box, "width");
    var boxHeight = getStyle(box, "height");
    var meWidth = parseInt(getStyle(me, "width"));
    var meHeight = parseInt(getStyle(me, "height"));
    var bulletWidth = 0;
    var bulletHeight = 0;
    var planeWidth = 0;
    var planeHeight = 0;


    // 产生子弹
    function creatBullet() {
        var bullet = document.createElement("div");
        bullet.className = "zd";
        box.appendChild(bullet);

        bulletWidth = parseInt(getStyle(bullet, "width"));
        bulletHeight = parseInt(getStyle(bullet, "height"));

        bullet.style.top = parseInt(getStyle(me, "top")) - parseInt(getStyle(bullet, "height")) + "px";
        bullet.style.left = parseInt(getStyle(me, "left")) + parseInt(getStyle(me, "width")) / 2 - parseInt(getStyle(
            bullet, "width")) / 2 + "px";

        // 每个子弹都有自己独立的定时器，所以使用bullet.timer
        bullet.timer = setInterval(function () {
            bullet.style.top = parseInt(getStyle(bullet, "top")) - bulletSpeed + "px";
            var planeAll = document.querySelectorAll(".plane");
            if (parseInt(bullet.style.top) <= 0) {
                clearInterval(bullet.timer);
                bullet.remove();
            }

            // 每生成一颗子弹，判断子弹与敌机的位置
            for (var i = 0; i < planeAll.length; i++) {
                var planeItem = planeAll[i];

                var tmpplaneLeft = parseInt(getStyle(planeItem, "left"));
                var tmpplaneTop = parseInt(getStyle(planeItem, "top"));
                var tmpbulletLeft = parseInt(getStyle(bullet, "left"));
                var tmpbulletTop = parseInt(getStyle(bullet, "top"));
                var meLeft = parseInt(getStyle(me, "left"));
                var meTop = parseInt(getStyle(me, "top"));


                // 敌机撞到了我方飞机，游戏结束
                if ((tmpplaneLeft + planeWidth > meLeft) && (meLeft + meWidth > tmpplaneLeft) &&
                    (tmpplaneTop + planeHeight > meTop) && (meTop + meHeight > tmpplaneTop)) {
                    for (var i = 0; i < planeAll.length; i++) {
                        clearInterval(planeAll[i].timer);
                    }

                    document.onkeydown = document.onkeyup = null;

                    clearInterval(bullet.timer);
                    clearInterval(bulletCreatTimer);
                    clearInterval(planeCreatTimer);
                    over.style.display = "block";
                }

                // 子弹打到敌机，敌机消失
                if ((tmpbulletLeft + bulletWidth > tmpplaneLeft) && (tmpplaneLeft + planeWidth > tmpbulletLeft) &&
                    (tmpbulletTop + bulletHeight > tmpplaneTop) && (tmpplaneTop + planeHeight > tmpbulletTop)) {
                    span.innerHTML = span.innerHTML * 1 + 1;

                    clearInterval(bullet.timer);
                    bullet.remove();

                    clearInterval(planeItem.timer);
                    planeItem.remove();
                }
            }
        }, 100);
    };
    bulletCreatTimer = setInterval(creatBullet, 200);


    // 产生敌机
    function creatPlane() {
        var plane = document.createElement("div");
        plane.className = "plane";
        box.appendChild(plane);

        planeWidth = parseInt(getStyle(plane, "width"));
        planeHeight = parseInt(getStyle(plane, "height"));

        plane.style.left = Math.floor(Math.random() *
            (parseInt(getStyle(box, "width")) - parseInt(getStyle(plane, "width")))) + "px";
        plane.style.top = 0;

        plane.timer = setInterval(function (e) {
            plane.style.top = parseInt(plane.style.top) + planeSpeed + "px";

            if (parseInt(plane.style.top) >= (parseInt(boxHeight) - parseInt(getStyle(plane,
                "height")))) {
                clearInterval(plane.timer);
                plane.remove();
            }
        }, 10);
    };
    planeCreatTimer = setInterval(creatPlane, 1000);


    // 键盘控制我方飞机移动
    document.onkeydown = document.onkeyup = function (e) {

        var evt = window.event || e;
        var keyCode = evt.which || evt.keyCode;
        switch (keyCode) {
            case 37: //左
                me.style.left = parseInt(getStyle(me, "left")) - step + "px";
                parseInt(me.style.left) <= 0 ? me.style.left = 0 : me.style.left = me.style.left;
                break;
            case 38: //上
                me.style.top = parseInt(getStyle(me, "top")) - step + "px";
                parseInt(me.style.top) <= 0 ? me.style.top = 0 : me.style.top = me.style.top;
                break;
            case 39: //右
                me.style.left = parseInt(getStyle(me, "left")) + step + "px";
                parseInt(me.style.left) >= (parseInt(boxWidth) - parseInt(meWidth)) ?
                    me.style.left = (parseInt(boxWidth) - parseInt(meWidth)) + "px" :
                    me.style.left = me.style.left;
                break;
            case 40: //下
                me.style.top = parseInt(getStyle(me, "top")) + step + "px";
                parseInt(me.style.top) >= (parseInt(boxHeight) - parseInt(meHeight)) ?
                    me.style.top = (parseInt(boxHeight) - parseInt(meHeight)) + "px" :
                    me.style.top = me.style.top;
                break;
            default:
                break;
        }
    }
</script>

</html
